import React, { Component } from 'react';


// 知识点:面试题
// setState({}) 对象语法 和函数语法的区别
// 在react中,为了提升性能, 会将多个修改操作进行合并,合并过程中, setState中的参数为对象形式的时候,
// 对象合并,则会导致最后一项替换之前的项, 所有执行+1
// 当合并函数的时候. 会将所有的函数放在一个数组中,然后循环执行函数, 所以最后执行几个函数就几次

class Mycls3 extends Component {
    state = {
        username: '曹阿瞒',
        age: 50
    }
    render() {
        const { username, age } = this.state
        return (
            <div>
                <div onClick={this.editinfo}>
                    <p>{username}</p>
                    <p>{age}</p>
                </div>

            </div>
        );
    }

    editinfo = () => {
        //. 第一种方式: 使用对象语法
        // this.setState({
        //     age: this.state.age + 1
        // })
        // this.setState({
        //     age: this.state.age + 1
        // })
        // this.setState({
        //     age: this.state.age + 1
        // })



        // 第二种时候函数写法
        this.setState((state) =>
        ({
            age: state.age + 1
        })
        )
        // this.setState((state) =>
        // ({
        //     age: state.age + 1
        // })
        // )
        // this.setState((state) =>
        // ({
        //     age: state.age + 1
        // })
        // )
    }
}

export default Mycls3;
